<template>
    <div class="goods-content">
        <div v-for="(goods,goodsIndex) in goodsList" :key="goodsIndex">
            <div class="fiex-goods" @click="to('goodsThis',goods.id)">
                <div class="img-goods"><img :src="goods.pic"></div>
                <div class="protxt">
                    <div class="name">{{goods.name}}</div>
                    <div class="wy-pro-pri">¥ <span v-if="goods.detailList[0].price < goods.detailList[goods.detailList.length -1].price">
                                        {{goods.detailList[0].price}} - {{goods.detailList[goods.detailList.length -1].price}}
                                    </span>
                        <span v-if="goods.detailList[0].price == goods.detailList[goods.detailList.length -1].price">
                                        {{goods.detailList[0].price}}
                                    </span></div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .goods-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .fiex-goods {
        background: #fff;
    }
    .img-goods img {
        width: 10.65rem;
        height: 10.65rem;
    }
    .protxt {
        margin-top: 0.3125rem;
        padding: 0.3125rem 0.5rem;
    }
    .protxt .name {
        text-align: left;
        font-size: 0.625rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .wy-pro-pri {
        color: #e21323;
        font-size: 0.625rem;
        margin-top: 0.1875rem;
        line-height: 1.25rem;
        text-align: left;
    }
    .wy-pro-pri span {
        padding-left: 0.1875rem;
        font-size: 0.8125rem;
    }
</style>
<script>
    export default {
        data() {
            return {
                goodsList: [],
            }
        },
        mounted() {
            this.getGoodsList()
        },
        methods: {
            to(page, id) {
                this.$router.push({
                    name: page,
                    params: {
                        id: id
                    }
                });
            },
            getGoodsList() {
                this.$fetch("/pmall/getGoodsList")
                    .then((response) => {
                        this.goodsList = response.data.pageInfo.list
                    })
            }
        },
    }
</script>
